<template>
	<div class="custom_popopver">
		<el-popover ref="notice-popover" width="400" trigger="click" v-model="visible" placement="bottom">
			<!--<el-tabs v-model="tabActiveName" @tab-click="handleClick">
				<template v-for="v in tabList1">
					<el-tab-pane :key="v.id" :label="v.name" :name="v.id" ></el-tab-pane>
				</template>
			</el-tabs>-->
			<block v-if="type=='warning'">
				<el-tabs v-model="tabName1" @tab-click="onTabChange1">
					<el-tab-pane label="待处理预警(2)" name="1">
						<notice-list url="/warnInfo/index" :list="[1,2,3,4,5]" type="warning" name="待处理预警信息"></notice-list>
					</el-tab-pane>
					<el-tab-pane label="未读预警" name="2">
						<notice-list url="/warnInfo/index" :list="[1,2,3,4,5]" type="warning" name="未读预警信息"></notice-list>
					</el-tab-pane>
				</el-tabs>
			</block>
			<block v-else-if="type=='approval'">
				<el-tabs v-model="tabName2">
					<el-tab-pane label="待审批(6)" name="1">
						<notice-list url="/warnInfo/index" :list="[]" type="approval" name="待审批事项"></notice-list>
					</el-tab-pane>
				</el-tabs>
			</block>
			<block v-else="type=='msg'">
				<el-tabs v-model="tabName3">
					<el-tab-pane label="未读消息(99+)" name="1">
						<notice-list url="/warnInfo/index" :list="[1,2,2,4]" type="msg" name="消息通知" :ignoreAll="true"></notice-list>
					</el-tab-pane>
				</el-tabs>
			</block>

			<div slot="reference">
				<el-badge class="custom_frame_icon" :value="count" :max="99">
                    <i class="icon el-icon-warning-outline" v-if="type=='warning'" ></i>
                    <i class="icon el-icon-edit" v-else-if="type=='approval'"></i>
                    <i class="icon el-icon-bell" v-else="type=='msg'"></i>

<!--					<img src="~@/assets/img/icon_warning.png" class="icon" v-if="type=='warning'" />-->
<!--					<img src="~@/assets/img/icon_approval.png" class="icon" v-else-if="type=='approval'" />-->
<!--					<img src="~@/assets/img/icon_msg.png" class="icon" v-else="type=='msg'" />-->
				</el-badge>
			</div>
		</el-popover>
	</div>

</template>
<script>
	import noticeList from './noticeList.vue'
	export default {

		components: {
			noticeList
		},
		data() {
			return {
				visible: false,
				tabName1: "1",
				tabName2: "1",
				tabName3: "1",
				tabActiveName: '1',
				tabList1: [{
						id: 1,
						name: "待处理预警",
						count: 2
					},
					{
						id: 2,
						name: "未读预警",
						count: 0
					},
				]
			}
		},
		props: {
			type: {
				type: String,
				default: "msg"
			},
			count:{
				type:Number,
				default:0
			}
		},

		methods: {

			onTabChange1(tab, event) {

			},
		}
	}
</script>
<style lang="scss"  scoped>
::v-deep{
	.custom_popopver{
	}
	.el-tabs__item{
		height: 36px;
		line-height: 36px;
	}
	.el-tabs__header{
		margin-bottom: 0;
	}
	.custom_frame_icon {
		.icon {
			/*width: 24px;*/
			/*height: 24px;*/
            font-size: 24px;
			margin: 0 5px;
		}
		.el-badge__content {
			border: none !important;
		}
		.el-badge__content.is-fixed {
			/*width: 20px;
		height: 20px;
		text-align: center;
		white-space: nowrap;
		line-height: 20px;
		padding: 0;*/
			min-width: 18px;
			padding: 0 4px;
			line-height: 18px;
			top: 0 !important;
			right: 17px !important;
			background-color: #FF2525 !important;
		}
	}
}
</style>
